<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item,index) in data.attrlist">
				<view class="top">
					<view class="left">
						<uni-icons type="compose" size="17" color="#FF1542"></uni-icons>
						<input type="text" v-model="item.attrs" placeholder="请输入规格名称">
					</view>
					<view class="right" @click="deletattr(index)">
						<uni-icons type="trash" size="15" color="#999"></uni-icons>
						删除
					</view>
				</view>
				<view class="bottom">
					<view class="itemval" v-for="(items,indexs) in item.attr">
						<view  v-if="!items.isvalue">
							<text>{{items.val}}</text> |  <uni-icons type="closeempty" size="15" color="#999" @click="deleteval(index,indexs)"></uni-icons>
						</view>
						<view class="addvals" v-else>
							<input type="text" v-model="items.val"> | <text @click="items.isvalue=false,item.addval=true"> + 添加</text>
						</view>
					 </view>
					<view class="itemval addval" v-if="item.addval" @click="addattrlist(index)">+添加规格项</view>
				</view>
			</view>
		</view>
		<view class="btns" @click="addattr">
			+ 添加新规格
		</view>
		<view class="bottomButtons"></view>
		<view class="bottomButton">
			<view class="btn" @click="submit">下一步</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		attrlist:[],
		list:[],
		addval:true
	})
	onLoad((option)=>{
		data.attrlist=uni.getStorageSync('attrlist')?uni.getStorageSync('attrlist'):[]
	})
	onShow(()=>{
		
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	function deleteval(index,indexs){//删除规格值
		data.attrlist[index].attr.splice(indexs,1)
	}
	function deletattr(index){//删除规格
	data.attrlist.splice(index,1)
	}
	function addattr (){//添加规格
		data.attrlist.push({
			attr:[],attrs:'',addval:true
		})
		data.list.push({attr:''})
	}
	function addattrlist (index){//添加规格值
		data.attrlist[index].attr.push({
			attr:'',
			val:'',
			isvalue:true
		})
		data.attrlist[index].addval=false
	}
	function shopClassList (){
		proxy.$SHOPrequest({
			url: `business/add_attribute/`,
			method: 'post',
			data:{},
			success(res) {
			}
		})
	}
	function submit(){//保存
	let list=[]
		data.attrlist.forEach((item,index)=>{
			if(item.attrs!=''&&item.attr.length!=0){
					item.attr.forEach((items,indexs)=>{
						console.log(items.val!='')
						if(items.val!=''){
							items.attr=item.attrs
						}else{
							item.attr.splice(indexs,1)
						}
					})
					if(item.attr.length!=0){
						list.push(item)
					}
			}
		})
		console.log('规格',list)
		data.attrlist=list
		if(list.length==0){
			uni.showToast({
				icon:'none',
				title:'规格有误'
			})
			return false
		}
		list.forEach((item,index)=>{
				proxy.$SHOPrequest({
					url: `business/add_attribute/`,
					method: 'post',
					data:{
						property_attr:item.attrs,
						property_vals:item.attr.map(items=>{
							return items.val
						})
					},
					success(res) {
						
					}
				})
		})
		uni.setStorageSync('attrlist',data.attrlist)
		proxy.$goURl(`/pages/business/specification?data=${JSON.stringify(data.attrlist)}`)
		
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.list{
			.item{
				background-color: #fff;
				padding: 20upx;
				border-radius: 20upx;
				margin-bottom: 20upx;
				.top{
					display: flex;
					justify-content: space-between;
					padding-bottom: 20upx;
					border-bottom: 1upx solid #eee;
					margin-bottom: 20upx;
					.left{
						display: flex;
						align-items: center;
						input{
							font-size: 30upx;
							margin-left: 10upx;
						}
					}
					.right{
						color: #999;
						font-size: 24upx;
					}
				}
				.bottom{
					display: flex;
					flex-wrap: wrap;
					.itemval{
						padding:8upx 30upx;
						font-size: 28upx;
						background-color: #F5F5F5;
						border-radius: 30upx;
						margin-right: 20upx;
						margin-bottom: 15upx;
						.addvals{
							display: flex;
							align-items: center;
							margin: 0;
							input{
								width: 100upx;
								font-size: 30upx;
							}
							text{
								color: $color1;
							}
						}
					}
					.addval{
						color: $color1;
					}
				}
			}
		}
		.btns{
			margin: 30upx;
			background-color: #fff;
			border:1upx solid $color1;
			text-align: center;
			color: $color1;
			padding: 20upx;
			border-radius: 20upx;
			font-size: 28upx;
		}

	}
</style>
